<template>
  <div class="wrapper">
    <table class="cart-table">
      <thead>
      <tr class="hd">
        <th width="30px" class="first"></th>
        <th width="430px">商品名称</th>
        <th width="180px">单价</th>
        <th width="190px">数量</th>
        <th width="180px">小计</th>
        <th width="190px">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr class="goods" v-for="item in cartList" :key="item.cartId">
        <td class="first"><div class="check"><input @click="addCart(item.cartId)" type="checkbox" name=""/></div></td>
        <td>
          <div class="info-box">
            <img :src="item.commodityImg" alt="">
            <div class="info">
              <div class="name">{{item.commodityName}}</div>
            </div>
          </div>
        </td>
        <td>￥<span class="unitprice">{{item.commodityPrice}}</span></td>
        <td>
          <div class="mod-numbox cart-numbox" data-max="30">
            <span class="count-minus"></span>
            <input class="count-input" v-model="item.commodityNum"  type="text" name="num" />
            <span class="count-plus"></span>
          </div>
        </td>
        <td class="txt-error">￥<span class="price">{{item.commodityNum * item.commodityPrice}}</span></td>
        <td><a @click="deleteCart(item.cartId)" class="del iconfont icon-shanchu"></a></td>
      </tr>
      </tbody>
    </table>
    <div class="cart-total-box">
      <div class="cart-total">
        <div class="fl">
          <div class="back"><a href="">继续购物</a></div><div class="count">共 <span class="num" id="totalNum">{{cartList.length}}</span> 件商品， 已选择 <span class="num" id="selectedNum">{{cartIdList.length}}</span> 件</div>
        </div>
        <div class="fr">
          <div class="price">
            合计（不含运费）：<span id="totalMoney">{{total}}</span>元
          </div>
          <a class="go-account ui-btn-theme" @click="toOrder()">去结算</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../../../base/api/http'
export default {
  name: 'CartWrapper',
  data () {
    return {
      cartList: [],
      cartIdList: []
    }
  },
  methods: {
    findAll () {
      http.requestQuickGet('/java/api/cart/findAll').then((res) => {
        if (res.status === 0) {
          this.cartList = res.data
        }
      })
    },
    deleteCart (id) {
      http.requestGet('/java/api/cart/delete', {
        'cartId': id
      }).then((res) => {
        if (res.status === 0) {
          alert('删除成功')
          this.$router.go(0)
        }
      })
    },
    addCart (id) {
      for (var i = 0; i < this.cartIdList.length; i++) {
        if (this.cartIdList[i] === id) {
          this.cartIdList.splice(i, 1)
          return
        }
      }
      this.cartIdList.push(id)
    },
    toOrder () {
      this.$router.push({path: '/confirmOrder', query: {type: 'cart', data: this.cartIdList}})
    }
  },
  mounted () {
    this.findAll()
  },
  computed: {
    total: function () {
      var total = 0
      if (this.itemList[0] !== undefined) {
        for (var i = 0; i < this.itemList.length; i++) {
          total = total + (this.itemList[i].commodityNum * this.itemList[i].commodityPrice)
        }
      }
      return total
    },
    itemList: function () {
      var itemList = []
      for (var i = 0; i < this.cartList.length; i++) {
        for (var j = 0; j < this.cartIdList.length; j++) {
          if (this.cartList[i].cartId === this.cartIdList[j]) {
            itemList.push(this.cartList[i])
          }
        }
      }
      return itemList
    }
  }
}
</script>
<style>
</style>
